import React from 'react';
import './ListItem.css'
import Lazyload from 'react-lazyload';
import loading from '@/assets/images/loading.gif';
import { useHistory } from 'react-router-dom';

const ListItem = (props) => {
    const {item}=props;
    // console.log(item, '///////')
    const history = useHistory()
    // const gotoDetail = (id) => {
    //     history.push(`/detail/${id}`)
    // }
    return (
        <>
            <div className="list-container">
                <div className="list-left">
                    <div className="list-left_img">
                        <div className="list-left_mark">{item.mark}</div>
                        <Lazyload 
                            height={100} 
                            placeholder={
                                <img width="100%" height="80%" 
                                src={loading}/> 
                            }>
                            <img src='https://img.meituan.net/groceryimages/c589ce938ff91de8b42d763bf896abc1228055.jpg@496w_496h_1e_1l' />
                        </Lazyload>
                    </div>
                </div>
                <div className="list-right">
                    <div className="list-right_head">
                        <div className="list-right_tag">{item.tag}</div>
                        <div className="list-right_title">{item.title}</div>
                    </div>
                    <div className="list-right_commont">附近{item.commont}人下单</div>
                    <div className="list-right_lock">{item.lock}</div>
                    <div className="list-right_bottom">
                        <div className="list-right_price">￥{item.price}</div>
                        <div className="list-right_label">{item.label}</div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default ListItem